/*
  Name:       material
  Author:     Mattia Astorino (http://github.com/equinusocio)
  Website:    https://material-theme.site/
*/

.cm-s-dark.CodeMirror {
  background-color: theme('colors.gray.800');
  color: theme('colors.gray.50');
}

.cm-s-dark .CodeMirror-gutters {
  background: theme('colors.gray.800');
  color: theme('colors.gray.600');
  border: none;
}

.cm-s-dark .CodeMirror-guttermarker,
.cm-s-dark .CodeMirror-guttermarker-subtle,
.cm-s-dark .CodeMirror-linenumber {
  color: theme('colors.gray.600');
}

.cm-s-dark .CodeMirror-cursor {
  border-left: 2px solid #aeafad;
}

.cm-s-dark div.CodeMirror-selected {
  background: #3a3d41;
}

.cm-s-dark.CodeMirror-focused div.CodeMirror-selected {
  background: #264f78;
}

.cm-s-dark .CodeMirror-line::selection,
.cm-s-dark .CodeMirror-line > span::selection,
.cm-s-dark .CodeMirror-line > span > span::selection {
  background: rgba(128, 203, 196, 0.2);
}

.cm-s-dark .CodeMirror-line::-moz-selection,
.cm-s-dark .CodeMirror-line > span::-moz-selection,
.cm-s-dark .CodeMirror-line > span > span::-moz-selection {
  background: rgba(128, 203, 196, 0.2);
}

.cm-s-dark .CodeMirror-activeline-background {
  background: rgba(0, 0, 0, 0.5);
}

.cm-s-dark .cm-keyword {
  color: theme('colors.gray.300');
}

.cm-s-dark .cm-number {
  color: theme('colors.gray.50');
}

.cm-s-dark .cm-def {
  color: theme('colors.gray.300');
}

.cm-s-dark .cm-string,
.cm-s-dark .cm-string-2 {
  color: theme('colors.sky.300');
}

.cm-s-dark .cm-comment {
  color: theme('colors.gray.400');
}

.cm-s-dark .cm-tag {
  color: theme('colors.pink.400');
}

/* HTML attribute `=` */
.cm-s-dark .cm-bracket + .cm-tag ~ .cm-attribute + [class='cm-m-xml'] {
  color: theme('colors.gray.500');
}

.cm-s-dark .cm-attribute {
  color: theme('colors.gray.300');
}

.cm-s-dark .cm-property {
  color: theme('colors.sky.300');
}

.cm-s-dark .cm-qualifier {
  color: theme('colors.pink.400');
}

.cm-s-dark .cm-bracket {
  color: theme('colors.gray.500');
}

.cm-s-dark .cm-callee {
  color: theme('colors.teal.200');
}

.cm-s-dark .cm-error {
  color: rgba(255, 255, 255, 1);
  background-color: #ff5370;
}

.cm-s-dark .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}

.cm-s-dark .cm-tag.cm-m-tailwindcss {
  color: theme('colors.gray.50');
}

.cm-s-dark .cm-variable.cm-m-javascript,
.cm-s-dark .cm-def.cm-m-javascript,
.cm-s-dark .cm-property.cm-m-javascript {
  color: inherit;
}
